<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>课程表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="./layui/css/layui.css" media="all">
    <script type="text/javascript" src="./layui/layui.js"></script>
    <script type="text/javascript" src="./javascript/jquery.min.js"></script>
    <style type="text/css">
        th {
            width: 70px;
            height: 80px;
            text-align: center;
        }

        td {
            width: 70px;
            height: 110px;
            text-align: center;
        }

        #number {
            width: 70px;
            height: 100px;
        }
    </style>

    <script>
        var table;
        layui.use(['table', 'layedit', 'laydate'], function () {
            table = layui.table //表
         
        });
        $(document).ready(function () {
            $(".clean").css("background-color", "#ffffff");
            var patrn = /^\+?[1-9][0-9]*$/;
            var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1}))+\d{8})$/;
            $("#find").click(function () {
                var value = $("#week").val();
                if ($("#week").val() == "" || $("#week").val() == null) {
                    layer.msg("请输入周次");
                }else if(value = null || value.length == 0 || patrn.exec(value) == null || value > 20 || value < 1){
                    layer.msg("周次只能为1-20非空数字");
                    $("#week").val("");
                } else {
                    // $("#a1").html("111111111<br>@2333333<br>@666666")
                    // $("#a1").css("background-color", "#f2f2f2");
                    var url = "http://127.0.0.1:8088/coursetable/findBy?className=" + $("#class").val()
                        + "&teacherName=" + $("#teacher").val()
                        +"&week="+$("#week").val();
                    $.get(url, function (data, status) {
                        console.log(url)
                        var ret = JSON.parse(JSON.stringify(data));
                        if (ret.status == 1) {
                            layer.alert(ret.msg);
                        } else {
                            $(".clean").html("")
                            $(".clean").css("background-color", "#ffffff");
                            ret.data.forEach(course => {
                                var day = course.timeName;
                                var number = course.timeId;
                                var text = course.courseName + "<br>教师：" + course.techerName + "<br>教室：" + course.roomName + "<br>班级：" + course.className;
                                if (day == "星期一" && number == 1) {
                                    $("#a1").html(text)
                                    $("#a1").css("background-color", "#f2f2f2");
                                }
                                if (day == "星期一" && number == 2) {
                                    $("#a2").html(text)
                                    $("#a2").css("background-color", "#f2f2f2");
                                }
                                if (day == "星期一" && number == 3) {
                                    $("#a3").html(text)
                                    $("#a3").css("background-color", "#f2f2f2");
                                }
                                if (day == "星期一" && number == 4) {
                                    $("#a4").html(text)
                                    $("#a4").css("background-color", "#f2f2f2");
                                }

                                if (day == "星期二" && number == 1) {
                                    $("#b1").html(text)
                                    $("#b1").css("background-color", "#f2f2f2");
                                }
                                if (day == "星期二" && number == 2) {
                                    $("#b2").html(text)
                                    $("#b2").css("background-color", "#f2f2f2");
                                }
                                if (day == "星期二" && number == 3) {
                                    $("#b3").html(text)
                                    $("#b3").css("background-color", "#f2f2f2");
                                }
                                if (day == "星期二" && number == 4) {
                                    $("#b4").html(text)
                                    $("#b4").css("background-color", "#f2f2f2");
                                }

                                if (day == "星期三" && number == 1) {
                                    $("#c1").html(text)
                                    $("#c1").css("background-color", "#f2f2f2");
                                }
                                if (day == "星期三" && number == 2) {
                                    $("#c2").html(text)
                                    $("#c2").css("background-color", "#f2f2f2");
                                }
                                if (day == "星期三" && number == 3) {
                                    $("#c3").html(text)
                                    $("#c3").css("background-color", "#f2f2f2");
                                }
                                if (day == "星期三" && number == 4) {
                                    $("#c4").html(text)
                                    $("#c4").css("background-color", "#f2f2f2");
                                }

                                if (day == "星期四" && number == 1) {
                                    $("#d1").html(text)
                                    $("#d1").css("background-color", "#f2f2f2");
                                }
                                if (day == "星期四" && number == 2) {
                                    $("#d2").html(text)
                                    $("#d2").css("background-color", "#f2f2f2");
                                }
                                if (day == "星期四" && number == 3) {
                                    $("#d3").html(text)
                                    $("#d3").css("background-color", "#f2f2f2");
                                }
                                if (day == "星期四" && number == 4) {
                                    $("#d4").html(text)
                                    $("#d4").css("background-color", "#f2f2f2");
                                }

                                if (day == "星期五" && number == 1) {
                                    $("#e1").html(text)
                                    $("#e1").css("background-color", "#f2f2f2");
                                }
                                if (day == "星期五" && number == 2) {
                                    $("#e2").html(text)
                                    $("#e2").css("background-color", "#f2f2f2");
                                }
                                if (day == "星期五" && number == 3) {
                                    $("#e3").html(text)
                                    $("#e3").css("background-color", "#f2f2f2");
                                }
                                if (day == "星期五" && number == 4) {
                                    $("#e4").html(text)
                                    $("#e4").css("background-color", "#f2f2f2");
                                }
                            });
                        }
                    });
                }


            });

        });


    </script>
</head>

<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>课程表</legend>
    </fieldset>
    <div class="layui-row ">
        <div class="layui-col-md7" style="margin-left: 50px;">
            <table class="layui-table" lay-even="" lay-skin="">

                <thead>
                    <tr style="text-align: center">
                        <th></th>
                        <th style="text-align: center">星期一</th>
                        <th style="text-align: center">星期二</th>
                        <th style="text-align: center">星期三</th>
                        <th style="text-align: center">星期四</th>
                        <th style="text-align: center">星期五</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td id="number">第一节<br>(8:20-9:45)</td>
                        <td class="clean" id="a1"></td>
                        <td class="clean" id="b1"></td>
                        <td class="clean" id="c1"></td>
                        <td class="clean" id="d1"></td>
                        <td class="clean" id="e1"></td>

                    </tr>
                    <tr>
                        <td id="number">第二节<br>10:05-11:30)</td>
                        <td class="clean" id="a2"></td>
                        <td class="clean" id="b2"></td>
                        <td class="clean" id="c2"></td>
                        <td class="clean" id="d2"></td>
                        <td class="clean" id="e2"></td>
                    </tr>
                    <tr>
                        <td id="number">第三节<br>(14:00-15:25)</td>
                        <td class="clean" id="a3"></td>
                        <td class="clean" id="b3"></td>
                        <td class="clean" id="c3"></td>
                        <td class="clean" id="d3"></td>
                        <td class="clean" id="e3"></td>
                    </tr>
                    <tr>
                        <td id="number">第四节<br>(15:45-17:10)</td>
                        <td class="clean" id="a4"></td>
                        <td class="clean" id="b4"></td>
                        <td class="clean" id="c4"></td>
                        <td class="clean" id="d4"></td>
                        <td class="clean" id="e4"></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="layui-col-md4" style="margin-top: 10px;">

            <div class="layui-form-item">
                <label class="layui-form-label">班级名</label>
                <div class="layui-input-inline">
                    <input type="text" id="class" name="class" lay-verify="required" placeholder="请输入"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">教师名</label>
                <div class="layui-input-inline">
                    <input type="text" id="teacher" name="teacher" lay-verify="required" placeholder="请输入"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">周数</label>
                <div class="layui-input-inline">
                    <input type="text" id="week" name="week" value="1" lay-verify="num" placeholder="请输入" autocomplete="off"
                        class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <a class="layui-btn layui-btn"  id="find" lay-event="addTeaching" style="margin-left: 150px;">查询课表</a>
            </div>

        </div>
    </div>
    </div>
</body>

</html>